/* eslint-disable react-refresh/only-export-components */
import React, { useMemo, useState } from "react";
import { getSwiper } from "../../../api/info";
import styles from "./css/home.module.css";
import { useLoaderData, useNavigate } from "react-router-dom";
import Swipe from "../../../components/swiper";
import { ResultPage, Popup, CalendarPickerView } from "antd-mobile";
import { Card, Switch, Button } from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import { useDispatch, useSelector } from "react-redux";
import {
  changeCity,
  changeFlag,
  changeDate,
} from "../../../store/slice/ticketSlice";
import { dtFm } from "../../../utils";

function Index() {
  //按钮开关
  const [visible1, setVisible1] = useState(false);

  let loaderData = useLoaderData();
  console.log(loaderData);
  let start = useSelector((store) => store.ticket.start);
  let end = useSelector((store) => store.ticket.end);
  let date = useSelector((store) => store.ticket.date);
  let isSpeed = useSelector((store) => store.ticket.isSpeed);
  let dis = useDispatch();

  //周几
  // const weks = dtFm(date);
  //性能优化
  let weks = useMemo(() => dtFm(date), [date]);
  console.log(weks);
  let nav = useNavigate();
  const goCitys = () => {
    nav("/city/start");
  };
  const goCitye = () => {
    nav("/city/end");
  };
  return (
    <div className={styles.box}>
      <ResultPage
        status=""
        title="火车票预订"
        description="便捷购票，服务您的每一次出行"
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={styles.row}>
            <span className={styles.start} onClick={goCitys}>
              {start}
            </span>
            <LoopOutline fontSize={26} onClick={() => dis(changeCity())} />
            <span onClick={goCitye} className={styles.end}>
              {end}
            </span>
          </div>
          <div
            className={styles.row}
            onClick={() => {
              setVisible1(true);
            }}
          >
            <span className={styles.data}>
              {date}
              <span className={styles.week}>
                {weks.week}
                {weks.info ? `(${weks.info})` : ""}
              </span>
            </span>
          </div>
          <div className={styles.row}>
            <span className={styles.isSpeed}>只看高铁/动车</span>
            <Switch
              checked={isSpeed}
              onChange={(val) => dis(changeFlag(val))}
            />
          </div>
          <div className={styles.row}>
            <Button
              color="warning"
              block
              shape="rounded"
              onClick={() =>
                nav(
                  `/train?start=${start}&end=${end}&date=${date}&isSpeed=${isSpeed}`
                )
              }
            >
              搜索
            </Button>
          </div>
        </ResultPage.Card>

        <Card style={{ height: 128, marginTop: 12 }}>
          <Swipe list={loaderData.Swiper}></Swipe>
        </Card>
      </ResultPage>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        bodyStyle={{ height: "60vh" }}
      >
        <CalendarPickerView
          min={Date.now()}
          max={Date.now() + 14 * 24 * 60 * 60 * 1000}
          value={date}
          onChange={(val) => {
            dis(changeDate(val));
            setVisible1(false);
          }}
          renderTop={(dt) => dtFm(dt).info}
        />
      </Popup>
    </div>
  );
}

export default Index;
export const loader = async () => {
  let { data: res } = await getSwiper();

  return { Swiper: res };
};
